import React from 'react'
import {connect} from 'react-redux'
import {reOrder} from '../actions/content-change'
import F from 'lodash/fp'

const getTemplatePage = id => {
    let page = F.find(['id', id], PAGES.templatePages)

    return {
        id: id,
        elements: JSON.parse(page.elements)
    }
}
// onClick={reOrder.bind(null, [t].concat(F.map('id', pages)), null, pages.concat(getTemplatePage(t)))}
const AddPage = ({reOrder, pages}) => {
    return (
        <div className="am-modal-dialog">
            <div className="am-modal-hd" style={{lineHeight: '30px'}}>
                <span className="title-b">页面选择</span><span className="title-l">点击选择您要插入的页面</span>
                <a href="javascript: void(0)" className="am-close-spin map-close" data-am-modal-close style={{lineHeight: '30px'}}>&times;</a>
            </div>
            <div className="pages">
                <ul>
                    {
                        PAGES.templateOrder.map(t => (
                            <li key={t} data-id={t}>
                                <img src={`/page-thumb/${t}.jpg`} />
                            </li>
                        ))
                    }
                </ul>
            </div>
            <div className="cut-img-btn-wp">
                <button
                    className="cut-img-confirm"
                    data-am-modal-close
                    onClick={ev => {
                        let a = Array.from($('#add-page li.selected')
                            .map((i, t) => $(t).data('id')))

                        if (a.length) {
                            reOrder(a.concat(F.map('id', pages)), null, pages.concat(a.map(getTemplatePage)))
                        }

                        $('.page-list .page-item')
                            .filter((i, t) => a.includes($(t).data('id')))
                            .css('animation', 'new-page .5s')
                            .one('animationend', function (ev) {$(this).css('animation', 'none')})
                    }}
                >
                    确认
                </button>
                <button className="cut-img-confirm cut-img-quit" data-am-modal-close="">取消</button>
            </div>
        </div>
    )
}

$('#add-page')
    .on('click', 'li', function (e) {$(this).toggleClass('selected')})



export default connect(
    ({global, card, gallery}) => ({
        pages: card.pages
    })
    , (d, props) => (
        { reOrder: F.compose(d, reOrder)
    })
)(AddPage)